const Utils = require("./utils.js")
const Evt = require("./event.js")
const DrawPanel = require("./draw-panel.js")
const NavPanel = require("./nav-panel.js")
const Toolbar = require("./toolbar.js")
const Notebook = require("./notebook.js")
const {CN,WEB,GHOST,EN} = require("./constant.js")
module.exports = 
class CanvasMgn{
	constructor(){
		let $env = {
			timer:0,
			currentTool:null,
			lineStyle:"solid",
			lineWidth:2,
			font:"14px sans-serif",
			shadowBlur:3,
			shadowColor: WEB.theme,
			ghostFillStyle:WEB.theme+"33",
			fillStyle:WEB.theme,
			strokeStyle:WEB.theme,
			lineDash:[0]
			// globalAlpha :0.3
		}
		let $event = new Evt()
		this.$event = $event;
		this.$env = $env;

		let tip = this.tip = Utils.createDOM("tip",{
			id:"draw-tip",
			class:"draw-tip"
		})
		
		let mask = this.mask = Utils.createDOM("div",{
			id:"draw-mask",
			class:"draw-mask base-mask"
		})

		$env.rootDom = mask;
		this.bind()

		this.panel = new DrawPanel($env,$event);
		let nav = new NavPanel($env,$event);
		let toolbar = new Toolbar($env,$event);
		let notebook = new Notebook($env,$event)

		mask.appendChild(tip)
		document.body.appendChild(mask);
	}
	bind(){
		this.$event.on(EN.action,(data)=>{
			this[data.name]&&this[data.name]()
		})

		this.$event.on(EN.img,()=>{
			this.beforeImagePick()
		})
		this.$event.on(EN.img_done,()=>{
			this.show()
		})

		this.$event.on("tip:hide",()=>{
			this.tip.classList.remove("show")
		})

		this.$event.on("tip:show",(config)=>{
			this.tip.innerHTML = config.text;
			this.tip.classList.add("show")
			if(config.timeOut){
				setTimeout(()=>{
					this.tip.classList.remove("show")
				},config.timeOut)
			}
		})

		this.$event.on(EN.append,(dom)=>{
			//判断重复性 多个组件有时候共用同一个模版
			Utils.query("#"+dom.id)||this.mask.appendChild(dom)
		})
		this.$event.on(EN.prepend,(dom)=>{
			//判断重复性 多个组件有时候共用同一个模版
			Utils.query("#"+dom.id)||this.mask.insertBefore(dom,this.mask.firstElementChild)
		})

		document.addEventListener("keyup",(e)=>{
			if(e.keyCode==90&&e.ctrlKey){
				this.panel.undraw()
			}
		})
	}
	beforeImagePick(){
		this.mask.classList.remove(CN.show)
		document.body.style.overflow=this.$env.bodyOverflow||"auto"
	}
	show(){
		this.$env.bodyOverflow = document.body.style.overflow;
		document.body.style.overflow = "hidden";
		this.mask.classList.add(CN.show)
	}
	powerOff(){
		this.mask.classList.remove(CN.show)
		//清除step状态
		this.panel.clearState();
		document.body.style.overflow=this.$env.bodyOverflow||"auto"
	}
}